<!-- inheriting from the base file -->
{% extends 'books/base.html' %}

<!-- this will help render the images -->
{% load static %}

{% block content %}
<div class="container mb-4">
    <div class="row">
        <!-- side navbar here -->
        <div class="col-md-3 mt-3">
            <div class="card">
                <h4 class="card-header px-3">Menu</h4>

                <ul class="list-group list-group-light list-group-small">
                    <li class="list-group-item px-3"><a href="">Home</a></li>
                </ul>

                <a href="{% url 'add-book' %}" class="m-2 btn btn-dark btn-sm">Add Book</a>

            </div>
        </div>

        <!-- books here -->
        <div class="col-md-9 mt-3">
            <div class="row">
                <!-- using a for loop to loop through all the books -->
                {% for book in books %}
                <div class="col-md-4">
                    <div class="card my-2">
                        <a href="">
                            <!-- this is the book image -->
                            <img src="{{ book.image.url }}" class="card-img-top" style="height:275px" />
                        </a>
                        <div class="card-body">
                            <!-- this is the book title -->
                            <h4 class="card-text">{{ book.title }}</h4>
                        </div>
                        <a href="{% url 'book-detail' book.id %}" class="m-2 btn btn-outline-dark btn-sm">View Book</a>
                    </div>
                </div>
                {% endfor %}

            </div>

        </div>

    </div>
</div>
{% endblock %}